import React, {useEffect, useState} from "react";


interface userType {
    name: string,
    email: string

}
interface Prop{
    userId:string,
}
const UserData: React.FC<Prop> = (userId) => {
    const [user, setUser] = useState<userType|null>(null);
    const [seconds, setSeconds] = useState<number>(0);
    useEffect(() => {
        fetch(`https://secret.url/user/${userId}`)
            .then(response => response.json())
            .then(data => setUser(data))
            .catch(error => console.error('Error fetching user data:', error));
        const intervalId = setInterval(() => {
            setSeconds(prevState => (prevState + 1 ));
        }, 1000);
        return ()=>{
            clearInterval(intervalId);
        };
    }, [])
    return (
        <div>
            <h1>User Data Component</h1>
            {user ? (
                <div>
                    <p>Name: {user.name}</p>
                    <p>Email: {user.email}</p>
                </div>
            ) : (
                <p>Loading user data...</p>
            )}
            <p>Timer: {seconds} seconds</p>
        </div>
    );
}
export default UserData;
